<!-- <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>
  // 创建分页组件需要的 按钮数组
  // btnCount: 最多能看到几个按钮
  // total: 总条数
  // size: 每页几条
  // page: 当前第几页
  function f(total, size, page, btnCount = 5) {
    // pageNum是总页数
    let pageNum = Math.ceil(total / size)
    // console.log(pageNum)
    // arr用于存放返回的页码
    let arr = []
    arr.push(page)
    // pre表示上一页页码，next表示下一页页码
    let pre = page,
      next = page
    // 如果返回的页码的数组小于最多能看到的按钮数，就向数组中插入页码
    while (arr.length < btnCount) {
      // 页码数不能小于1
      if (pre > 1) {
        arr.unshift(--pre)
      }
      // 页码数不能超过总页数
      if (next < pageNum) {
        arr.push(++next)
      }
    }
    return arr
  }

  console.log(f(100, 10, 1, 20))
  // console.log(f(100, 10, 7, 7))
  // console.log(f(100, 10, 2, 7))
  // console.log(f(100, 10, 5, 7))
</script> -->
<script>

// 测试效果
console.log(getPageList(100, 10, 1, 5))
console.log(getPageList(100, 10, 2, 5))
console.log(getPageList(100, 10, 3, 5))
console.log(getPageList(100, 10, 4, 5))
console.log(getPageList(100, 10, 5, 5))
console.log(getPageList(100, 10, 6, 5))
console.log(getPageList(100, 10, 7, 5))
console.log(getPageList(100, 10, 8, 5))
console.log(getPageList(100, 10, 9, 5))
console.log(getPageList(100, 10, 10, 5))

// 根据总数据数、每页数据数、当前页码、应显示页码的数量，返回应显示的页码
function getPageList(total, size, page, btnCount = 5) {
  const maxPage = Math.ceil(total / size)
  if (maxPage <= btnCount) { // 当最大页数小于展示页数时，直接返回全部页数
    return creatStairArr(1, maxPage) // 函数调用：根据首位数组和长度生成依次递增1的数组
  } else {
    const safeDistance = Math.floor(btnCount / 2) // 中心页的安全距离，首页或尾页距离当前页的距离小于此值则判为显示页数与总页数的两端接触
    const leftDistance = page - 1 // 当前页距首页的距离
    const rightDistance = maxPage - page // 当前页距尾页的距离
    if (leftDistance >= safeDistance && rightDistance >= safeDistance) { // 显示页数不与两端接触的情况
      return creatStairArr(page - safeDistance, btnCount)
    } else if (leftDistance < safeDistance) { // 显示页数与首页接触的情况
      return creatStairArr(1, btnCount)
    } else if (rightDistance < safeDistance) { // 显示页数与尾页接触的情况
      return creatStairArr(maxPage - btnCount + 1, btnCount)
    }
  }
}

// 根据首位数组和长度生成依次递增1的数组
function creatStairArr(start, length) {
  const arr = []
  for (let i = start; i < start + length; i++) arr.push(i)
  return arr

  // 高级写法
  // return Array.from({ length }, (item, index) => index + start)
}
</script>
